<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>预付款页面</title>
    <script type="text/javascript"
            src="<s:url value='http://static.bgext.com/jquery-3.1.1.min.js'  />"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="<s:url value='/js/jquery.timers-1.2.js'/>"></script>
    <link rel="stylesheet" type="text/css"
          href="<s:url value='http://static.bgext.com/layer/skin/layer.css'/>"/>
    <script type="text/javascript"
            src="<s:url value="http://static.bgext.com/layer/layer.js"/>"></script>
    <script type="text/javascript">
        var allFundState = ${allFundState};
        var allFundPayType = ${allFundPayType};
        var stateUtil = {
            get: function (arras, key) {
                for (var a in arras) {
                    if (arras[a][1] == key) {
                        return arras[a][0];
                    }
                }
            }
        }
        function imgClick(){
            var imgObj = window.event.target;
            var $radio = $(imgObj).prev();
            $radio.click();
        }
        function confirmPay(){
            var $btn = $(window.event.target).attr("disabled", "disabled");
            var payType = $("input:radio:checked").val();
            if(!payType){
                $("#msg_box").text("您还没有选择支付方式").show();
                $btn.removeAttr("disabled");
                return;
            }
            var totalAmount=$("#amount").val();
            if(!totalAmount || parseFloat(totalAmount)==0){
                $("#msg_box").text("请输入正确的金额").show();
                $btn.removeAttr("disabled");
                return;
            }
            if("Union" === payType){
                $("#QrCodeArea").hide("slow");
                if(!window.confirm("即将前往新界面完成支付")){
                    $btn.removeAttr("disabled");
                    return;
                }
                gotoUnionPay();
            }else if("WeChat" === payType){
                getQRcode(1);
                $("#payFormContainer").hide("slow");
                $("#QrCodeArea").show("slow");
                $("#qrCodeUrl").attr("src", "<s:url value='/img/wx-phone-bg.png'/>");
                $("#p_msg").html("请用手机<label style='font-family:bold; color: #DD4B39;'>微信</label>扫描此二维码进行支付");
            }else if("AliPay" === payType){
               getQRcode(2); //扫码支付
                $("#payFormContainer").hide("slow");
                $("#QrCodeArea").show("slow");
                $("#qrCodeUrl").attr("src", "<s:url value='/img/zf-phone-bg.png'/>");
                $("#p_msg").html("请用手机<label style='font-family:bold; color: #DD4B39;'>支付宝</label>扫描此二维码进行支付");
                // var totalAmount=$("#amount").val();
                // var billNo = $("input[name='billNo']").val();
                // aliOnlinePay(billNo, totalAmount); //在线支付
            }
        }

        function getQRcode(payChannel){
            var totalAmount=$("#amount").val();
            var billNo = $("input[name='billNo']").val();
            var orderNo = billNo.trim().length === 0 ? getQRcode.serialNumber[payChannel] : billNo;
            $.ajax({
                       type: "GET",
                       url: "/fund/getQRcode",
                       data: {payChannel:payChannel, orderNo: orderNo, totalAmount:totalAmount},
                       dataType: "json",
                       success: function(data){
                           getQRcode.serialNumber[payChannel] = data["outTradeNo"];
                           if(data && data.qrUrl){
                               $("#qrCodeUrl").attr("src",data.qrUrl);
                               $("#qrCodeUrl").attr("alt",payChannel=='1'?"微信":"支付宝");
                               $("#qrCodeUrl").attr("title",payChannel=='1'?"微信":"支付宝");
//                               $("#msg_box").html(data.returnMsg);
                               $("input[name='billNo']").val(data.outTradeNo);
                                startQResultTime()
                           }else{
                               $("#qrCodeUrl").attr("src","");
                               $("#qrCodeUrl").attr("alt","");
                               $("#qrCodeUrl").attr("title","");
//                               $("#msg_box").html(data.returnMsg);
                               $("input[name='billNo']").val("");
                           }
                       }
                   });
        }
        getQRcode.serialNumber={"0":"", "1":""};


        function gotoUnionPay(){
            var amount=$("#amount").val();
            $("input[name='state']").val("INIT");
            $("input[name='fundPayType']").val("ONLINE");
            $.ajax({
                       url:"ajustment-saveOrUpdate",
                       type:"post",
                       data:$("#payForm").serialize(),
                       success: function (data) {
                           try {
                               var jr = JSON.parse(data.data);
                               if ("undefined" != typeof jr && "undefined" != typeof jr.purl) {
                                   window.open(jr.purl);
                               }
                           } catch (e) {
                           }
                           backToAjustmentMain();
                       }
                   });
        }

        function rechoicePayType(){
            $("#QrCodeArea").hide("slow");
            $("#payFormContainer").show("slow");
            $("#confirmBtn").removeAttr("disabled");
            $("#qrCodeUrl").attr("src", "<s:url value='/img/wx-phone-bg.png'/>");
            stopQueryTime();
        }

        /**
        * 开启查询，每秒一次
        */
        function startQResultTime(){
            $('body').everyTime('1s',function(){
                var billNo=$("input[name='billNo']").val();
                if(billNo){
                    $.ajax({
                        url:"getPaymentResult",
                        type:"post",
                        data:{"orderNo":billNo},
                        success: function (data) {
                            if(data=="SUCCESS"){
                                location.href = 'paySuccess';
                            }
                        }
                    });
                }
            });
        }

        /**
        * 关闭所有定时器
        */
        function stopQueryTime(){
            $('body').stopTime();
        }

        function backToAjustmentMain() {
            location.href = '<s:url value="/fund/ajustment-main"/>';
        }

        function clearNoNum(obj)
        {
            obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
            obj.value = obj.value.replace(/^\./g,"");  //验证第一个字符是数字而不是.
            obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的.
            obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        }

        $(function(){
            var stateInput = $("input[name='state']");
            var state = stateInput.val();
            stateInput.val(stateUtil.get(allFundState, state));
            if(state === 'SUCCESS'){
                var payTypeInput = $("input[name='fundPayType']");
                var payType = payTypeInput.val();
                payTypeInput.val(stateUtil.get(allFundPayType, payType));
                payTypeInput.parent().show();
                $("#amount").attr("readonly", "readonly");
                $("#amount").css("background-color", "#eee");
                $("#payForm").siblings().hide();
                $("#confirmBtn").hide();
            }
            //默认选中支付方式
            var payType = "${fundAjustment.fundPayType}";
            console.log(payType);
            if("ONLINE" === payType){
                $("input:radio[value='Union']")[0].checked = true;
                $("a[href='#panel-onlineBank']").click();
            }else if("Alipay" === payType){
                $("input:radio[value='AliPay']")[0].checked = true;
                $("a[href='#panel-platform']").click();
            }else if("WechatPay" === payType){
                $("input:radio[value='WeChat']")[0].checked = true;
                $("a[href='#panel-platform']").click();
            }

            //

        });

        /**
         * 支付宝在线支付
         * @param tradeNo 订单号
         * @param amount 金额
         */
        function aliOnlinePay(tradeNo, amount){
            $.ajax({
                url:'<s:url value="/fund/getPayPlatformOnlinePayUrl"/>',
                method:'post',
                dataType:'json',
                data:{orderNo:tradeNo, totalAmount:amount},
                success : function(data){
                    if(data.result){
                        var left = (window.screen.availWidth - 1280) / 2;
                        window.open(data.data,"window","width=1280px,height=800px, modal=yes,status=no,location=no,left=" + left + ", top=100");
                        startQResultTime();
                        layer.load(2, {shade:0.3});
                    }else{
                        $("#msg_box").text(data.msg).show();
                        $("#confirmBtn").removeAttr("disabled")
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12" id="payFormContainer">
            <form class="form-horizontal" id="payForm">
                <fieldset>
                    <legend>预付款信息</legend>
                     <div class="row">
                        <div class="form-group col-xs-5">
                            <label class="col-xs-4">预付款编号</label>
                            <input class="col-xs-7" type="text" name="bid" readonly style="background-color: #eee" value="${fundAjustment.bid}"/>
                        </div>
                        <div class="form-group col-xs-5">
                            <label class="col-xs-4">支付编码</label>
                            <input class="col-xs-7" type="text" name="billNo" readonly style="background-color: #eee" value="${fundAjustment.billNo}"/>
                        </div>
                     </div>
                    <div class="row">
                        <div class="form-group col-xs-5">
                            <label class="col-xs-4">状态</label>
                            <input class="col-xs-7" type="text" name="state" readonly style="background-color: #eee" value="${fundAjustment.state}"/>
                        </div>
                        <div class="form-group col-xs-5" style="display: none">
                            <label class="col-xs-4">预付款方式</label>
                            <input class="col-xs-7" type="text" name="fundPayType" readonly style="background-color: #eee" value="${fundAjustment.fundPayType}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-xs-5">
                            <label class="col-xs-4">金额</label>
                            <input class="col-xs-7" type="text" id="amount" name="amount" value="${fundAjustment.amount}" onblur="clearNoNum(this);"/>
                        </div>
                        <div class="form-group col-xs-5">
                            <label style="color: red; display: none" id="msg_box">请输入正确的金额</label>
                        </div>
                    </div>
                    <div class="row" style="text-align: center">
                        <input class="btn btn-default" type="button" id="confirmBtn" value="确认支付" onclick="confirmPay();"/>
                        &nbsp;&nbsp;&nbsp;
                        <input class="btn btn-default" type="button" value="返回" onclick="backToAjustmentMain();"/>
                    </div>
                </fieldset>
            </form>
            <br/>
            <div class="tabbable" id="tabs-669662">
                <ul class="nav nav-tabs">
                    <li>
                        <a href="#panel-onlineBank" data-toggle="tab">网上银行</a>
                    </li>
                    <li class="active">
                        <a href="#panel-platform" data-toggle="tab">支付平台</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="panel-onlineBank">
                        <p style="padding-top: 15px; height: 90px">
                            <input type="radio" name="payType" value="Union" style="cursor: pointer;"/>
                            <img alt="140x140" src="<s:url value="/img/yinlian.jpg"/>" class="img-rounded" height="60" style="cursor: pointer;" onclick="imgClick();"/>
                        </p>
                    </div>
                    <div class="tab-pane active" id="panel-platform">
                        <p>
                            <input type="radio" name="payType" value="WeChat" style="cursor: pointer;"/>
                            <img alt="140x140" src="<s:url value="/img/weixinIcon.jpg"/>" class="img-rounded" height="90" style="cursor: pointer" onclick="imgClick();"/>
                            <input type="radio" name="payType" value="AliPay" style="cursor: pointer;"/>
                            <img alt="140x140" src="<s:url value="/img/zhifubao.jpg"/>" class="img-rounded" height="70" style="cursor: pointer" onclick="imgClick();"/>
                        </p>
                    </div>
                </div>
            </div>
            <p> 请填写预付款金额，金额精确到小数点后2位。</p>
            <p> 在线预付款到账需要一定时间，请耐心等候。 </p>
            <p> 重新支付将丢失当前的支付编号记录，请谨慎操作，如对预付款状态有疑问，请咨询平台客服人员。 </p>
            <p><br/></p>
        </div>
        <div id="QrCodeArea" class="col-xs-12" style="padding-top: 50px;text-align: center; display: none;">
            <img alt="40x40" id="qrCodeUrl" name="qrCodeUrl" src="<s:url value='/img/wx-phone-bg.png'/>" class="img-rounded" width="200" height="200"/>
            <p id="p_msg"> </p>
            <p style="font-family: bold; color: #a24b0d">提醒：可能会出现网络波动，请您在完成扫码支付之后耐心等待页面通知</p>
            <br/>
            <button type="button" class="btn btn-link" onclick="rechoicePayType();">&lt;&nbsp;选择其他支付方式</button>
            <%--<img alt="40x40" src="/img/wx-phone-bg.png" class="img-rounded"/>--%>
        </div>
    </div>
</div>
</body>
</html>

